<template>
	<div>
		<el-carousel indicator-position="outside" style="margin-top: 10px;">
			<el-carousel-item v-for="(item,index) in imageList" :key="index">
				<img src="../assets/QQ图片20210713144719.png" style="width: 100%;height:100%;" />
			</el-carousel-item>
		</el-carousel>
		<!-- <div >
			<h2 class="head_main">课程推荐</h2>
			<div class="main">
				<div class="main_Item" >
					<img src="http://jy1.nbyingdong.cn/web3/picture/a3.png"></img>
				</div>
				<div class="main_Item" >
					<img src="http://jy1.nbyingdong.cn/web3/picture/a3.png"></img>
				</div>
				<div class="main_Item" >
					<img src="http://jy1.nbyingdong.cn/web3/picture/a3.png"></img>
				</div>
			</div>
			<div style="clear：both"></div>
		</div> -->
	    <div style="margin-bottom: 60px;">
	    	<h2 class="head_main">专项练习</h2>
	    	<div class="main">
	    		<div class="main_Item1">
	    		<h3>JavaEE</h3>	
	    		</div>
	    		<div class="main_Item1">
	    		<h3>Web前端</h3>	
	    		</div>
	    		<div class="main_Item1">
	    		<h3>大数据</h3>	
	    		</div>
	    		<div class="main_Item1">
	    		<h3>Python</h3>	
	    		</div>
	    		<div class="main_Item1">
	    		<h3>C++</h3>	
	    		</div>
	    		<div class="main_Item1">
	    		<h3>人工智能</h3>
	    		</div>
	    		<div class="main_Item1">
				<h3>产品</h3>
				</div>
	    		<div class="main_Item1">
	    		<h3>测试</h3>	
	    		</div>
	    		
	    	</div>
	    </div>
		<div class="step" style="margin-top: 30px;">
		    <h1>学习路线</h1>
		    <div class="demo">
		        <div class="demo1">
		            <div  class="icon">
		                <svg t="1633913680498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13135" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#5573E9" p-id="13136"></path><path d="M512 472l320 160-320 160-320-160z" fill="#D9E1FF" p-id="13137"></path><path d="M193.472 712L512 872.32v-80.32L193.472 631.68z" fill="#A8BAFF" p-id="13138"></path><path d="M832 712.32l-320 160v-80.32l320-160z" fill="#FFFFFF" p-id="13139"></path><path d="M672 547.2L608 512V348.8l64 35.2z" fill="#A8BAFF" p-id="13140"></path><path d="M672 547.2L608 512 384 624l64 35.2z" fill="#D9E1FF" p-id="13141"></path><path d="M448 723.2l-64-26.688V573.696L448 601.6z" fill="#A8BAFF" p-id="13142"></path><path d="M497.408 664L448 688V601.6l49.408-22.4z" fill="#FFFFFF" p-id="13143"></path><path d="M440.704 553.472L384 576l64 25.6 49.408-22.4zM736 288l-32-16-224 110.016 32 16z" fill="#D9E1FF" p-id="13144"></path><path d="M448 304l288-144v64L448 368zM448 429.12L736 288v64L448 496zM448 659.2l224-112 64 32L448 723.2z" fill="#FFFFFF" p-id="13145"></path><path d="M512 336v128l-64 32v-128zM736 343.68v235.52l-64-32V375.68z" fill="#FFFFFF" p-id="13146"></path><path d="M736 160l-64-32L384 272l64 32z" fill="#D9E1FF" p-id="13147"></path><path d="M448 496l-64-32v-192l64 32z" fill="#A8BAFF" p-id="13148"></path></svg>
		            </div>
		            <div class="text">
		                <p>主流前端web技术点</p>
		                <div>HTML5、CSS3、JavaScript</div>
		                <div>jQuery、响应式布局、Ajax</div>
		                <div>vue.js、框架、项目管理技术</div>
		            </div>
		        </div>
		        <div class="demo1">
		            <div class="icon">
		                <svg t="1633913158487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4634" width="200" height="200"><path d="M950.775926 803.431937H73.223994c-40.383997 0-73.223994-32.799997-73.223994-73.143994v-656.799949C0 33.143997 32.839997 0.344 73.223994 0.344h877.551932c40.383997 0 73.223994 32.799997 73.223994 73.143994v656.799949c0 40.343997-32.839997 73.143994-73.223994 73.143994zM73.335994 730.287943h877.439932l0.112-0.12V73.599994l-0.112-0.112H73.335994l-0.112 0.112 0.112 656.687949c-0.112 0-0.112 0 0 0z" fill="#1682E6" p-id="4635"></path><path d="M363.951972 603.431953h-0.12c-31.463998-0.12-47.823996-31.775998-55.831996-47.087996-9.263999-17.831999-18.759999-41.031997-28.031998-63.431996-7.319999-17.823999-14.983999-36.223997-22.079998-51.079996-2.632-5.488-4.8-9.831999-6.752-13.263998-5.488 4.344-12.927999 11.319999-22.655998 22.175998-13.495999 15.087999-23.447998 28.911998-23.567998 29.023998a36.543997 36.543997 0 0 1-51.023996 8.463999 36.455997 36.455997 0 0 1-8.471999-50.975996c0.576-0.8 14.647999-20.455998 33.071997-40.223997 30.543998-32.919997 56.175996-48.231996 80.431994-48.463996h0.344c14.983999 0 28.599998 7.087999 40.383997 21.031998 5.84 6.967999 11.783999 16.111999 17.959998 27.999998 10.071999 19.199999 20.255998 43.767997 29.975998 67.431995 4.24 10.279999 10.183999 24.679998 16.135999 38.055997 9.495999-19.655998 20.135998-43.655997 28.031997-61.143996 50.111996-112.455991 76.079994-166.511987 119.215991-166.511987 39.359997 0 72.079994 39.079997 121.167991 103.423992 8.463999 11.087999 19.791998 25.943998 28.479997 36.111998 12.703999-11.199999 37.759997-37.479997 82.615994-97.711993 37.295997-50.055996 69.215995-98.167992 69.559995-98.623992a36.559997 36.559997 0 0 1 50.687996-10.287999 36.463997 36.463997 0 0 1 10.295999 50.623996c-1.488 2.288-37.415997 56.463996-79.175994 111.663991-24.823998 32.911997-46.679996 59.423995-64.639995 78.511994-30.663998 32.567997-51.831996 45.823996-73.119994 45.823996-20.479998 0-35.807997-14.279999-49.415996-29.599997-10.183999-11.535999-21.519998-26.399998-33.639998-42.279997-13.615999-17.831999-27.687998-36.343997-41.071997-51.319996-7.095999-7.999999-12.591999-13.367999-16.591998-16.911999-4.352 6.4-10.415999 16.687999-18.647999 32.911998-12.583999 24.687998-25.975998 54.743996-38.903997 83.775993-13.159999 29.487998-25.519998 57.255996-36.607997 78.623994-6.639999 12.799999-12.239999 22.063998-17.511999 29.263998-4.344 6.056-17.727999 23.999998-40.495996 23.999998z m147.591988 291.079977c-43.479997 0-84.783993-8.679999-116.359991-24.455998-37.871997-18.855999-58.695995-46.287996-58.695995-77.255994a28.599998 28.599998 0 0 1 28.607997-28.567998c15.783999 0 28.599998 12.799999 28.599998 28.567998 0 15.655999 44.735997 44.455997 117.839991 44.455997 73.119994 0 117.855991-28.799998 117.855991-44.455997a28.599998 28.599998 0 0 1 28.599998-28.567998c15.791999 0 28.599998 12.799999 28.599997 28.567998 0 30.855998-20.823998 58.287995-58.687995 77.255994-31.583998 15.775999-72.879994 24.455998-116.359991 24.455998zM109.839991 1023.99992a36.559997 36.559997 0 0 1-36.615997-36.567997 36.559997 36.559997 0 0 1 36.615997-36.575997l804.783938-0.8a36.559997 36.559997 0 0 1 36.607997 36.575997 36.559997 36.559997 0 0 1-36.607997 36.567997L109.839991 1023.99992z" fill="#1682E6" p-id="4636"></path></svg>
		            </div>
		            <div class="text">
		                <p>主流后端JAVA技术点</p>
		                <div>JavaSE、面向对象、数据库</div>
		                <div>JavaWeb、Tomcat、三层框架、JSP</div>
		                <div>SSM框架、SpringBoot、SpringCloud</div>
		            </div>
		        </div>
		        <div class="demo1">
		            <div class="icon">
		                <svg t="1633913417484" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6371" width="200" height="200"><path d="M632.0128 167.9104a6.5024 6.5024 0 0 1-3.2-0.8448L512 99.6352l-116.8128 67.4304a6.5024 6.5024 0 0 1-8.7552-2.3552 6.4768 6.4768 0 0 1 2.3552-8.7552l120.0128-69.2736a6.3488 6.3488 0 0 1 6.4 0l120.0128 69.2736c3.0464 1.7664 4.096 5.7088 2.3552 8.7552a6.4512 6.4512 0 0 1-5.5552 3.2zM512 938.1632a6.5024 6.5024 0 0 1-3.2-0.8448l-120.0128-69.2736a6.4512 6.4512 0 0 1-2.3552-8.7552c1.792-3.072 5.7344-4.096 8.7552-2.3552L512 924.3648l116.8128-67.4304a6.4512 6.4512 0 0 1 8.7552 2.3552 6.4768 6.4768 0 0 1-2.3552 8.7552l-120.0128 69.2736a6.2464 6.2464 0 0 1-3.2 0.8448zM148.4544 447.104a6.4 6.4 0 0 1-6.4-6.4v-138.5984c0-2.2784 1.2288-4.4032 3.2-5.5552l120.0128-69.2992a6.4768 6.4768 0 0 1 8.7552 2.3552 6.4768 6.4768 0 0 1-2.3552 8.7552l-116.8128 67.456v134.912a6.4 6.4 0 0 1-6.4 6.3744zM755.5328 797.5936a6.4512 6.4512 0 0 1-5.5552-3.2 6.4768 6.4768 0 0 1 2.3552-8.7552l116.8128-67.456v-134.912a6.4 6.4 0 0 1 12.8 0v138.5984a6.4512 6.4512 0 0 1-3.2 5.5552l-120.0128 69.2992a6.0416 6.0416 0 0 1-3.2 0.8704zM268.4672 797.5936a6.5024 6.5024 0 0 1-3.2-0.8448l-120.0128-69.2992a6.4512 6.4512 0 0 1-3.2-5.5552v-138.5984a6.4 6.4 0 0 1 12.8 0v134.912l116.8128 67.456c3.0464 1.7664 4.096 5.7088 2.3552 8.7552a6.4768 6.4768 0 0 1-5.5552 3.1744zM875.5456 447.104a6.4 6.4 0 0 1-6.4-6.4v-134.912L752.3328 238.336a6.4512 6.4512 0 0 1-2.3552-8.7552 6.4512 6.4512 0 0 1 8.7552-2.3552l120.0128 69.2992a6.4512 6.4512 0 0 1 3.2 5.5552v138.5984a6.4 6.4 0 0 1-6.4 6.4256z" fill="#00CFFF" p-id="6372"></path><path d="M396.032 583.1424l-0.256 94.336a3.4304 3.4304 0 0 1-5.1712 2.9696l-82.1248-47.4112a3.3792 3.3792 0 0 1-1.7152-2.9952l0.256-94.336c0-2.6624 2.8928-4.3008 5.1712-2.9696l82.1248 47.4112a3.4304 3.4304 0 0 1 1.7152 2.9952z" fill="#008CFF" p-id="6373"></path><path d="M396.3904 460.416l-0.256 94.336a3.4304 3.4304 0 0 1-5.1712 2.9696l-82.1248-47.4112a3.3792 3.3792 0 0 1-1.7152-2.9952l0.256-94.336c0-2.6624 2.8928-4.3008 5.1712-2.9696l82.1248 47.4112a3.4304 3.4304 0 0 1 1.7152 2.9952z" fill="#008CFF" p-id="6374"></path><path d="M502.8608 644.8128l-0.256 94.336a3.4304 3.4304 0 0 1-5.1712 2.9696l-82.1248-47.4112a3.3792 3.3792 0 0 1-1.7152-2.9952l0.256-94.336c0-2.6624 2.8928-4.3008 5.1712-2.9696l82.1248 47.4112a3.4816 3.4816 0 0 1 1.7152 2.9952z" fill="#008CFF" p-id="6375"></path><path d="M627.968 583.1424l0.256 94.336c0 2.6624 2.8928 4.3008 5.1712 2.9696l82.1248-47.4112a3.3792 3.3792 0 0 0 1.7152-2.9952l-0.256-94.336a3.4304 3.4304 0 0 0-5.1712-2.9696l-82.1248 47.4112a3.4304 3.4304 0 0 0-1.7152 2.9952z" fill="#008CFF" p-id="6376"></path><path d="M627.6096 460.416l0.256 94.336c0 2.6624 2.8928 4.3008 5.1712 2.9696l82.1248-47.4112a3.3792 3.3792 0 0 0 1.7152-2.9952l-0.256-94.336a3.4304 3.4304 0 0 0-5.1712-2.9696l-82.1248 47.4112a3.4304 3.4304 0 0 0-1.7152 2.9952z" fill="#1AC678" p-id="6377"></path><path d="M521.1392 644.8128l0.256 94.336c0 2.6624 2.8928 4.3008 5.1712 2.9696l82.1248-47.4112a3.3792 3.3792 0 0 0 1.7152-2.9952l-0.256-94.336a3.4304 3.4304 0 0 0-5.1712-2.9696l-82.1248 47.4112a3.4816 3.4816 0 0 0-1.7152 2.9952z" fill="#008CFF" p-id="6378"></path><path d="M514.2016 380.8768l81.5616-47.4112a3.456 3.456 0 0 0 0-5.9648l-82.1248-47.4112a3.4816 3.4816 0 0 0-3.456 0l-81.5616 47.4112a3.456 3.456 0 0 0 0 5.9648l82.1248 47.4112a3.328 3.328 0 0 0 3.456 0z" fill="#008CFF" p-id="6379"></path><path d="M408.064 442.5728l81.5616-47.4112a3.456 3.456 0 0 0 0-5.9648l-82.1248-47.4112a3.4816 3.4816 0 0 0-3.456 0l-81.5616 47.4112a3.456 3.456 0 0 0 0 5.9648l82.1248 47.4112a3.4816 3.4816 0 0 0 3.456 0z" fill="#008CFF" p-id="6380"></path><path d="M619.5712 447.104l84.5056-49.1008a3.584 3.584 0 0 0 0-6.1952l-85.0944-49.1264a3.584 3.584 0 0 0-3.584 0l-84.5056 49.1008a3.584 3.584 0 0 0 0 6.1952l85.0944 49.1264a3.584 3.584 0 0 0 3.584 0zM610.4576 460.416l-0.256 94.336a3.4304 3.4304 0 0 1-5.1712 2.9696l-82.1248-47.4112a3.3792 3.3792 0 0 1-1.7152-2.9952l0.256-94.336c0-2.6624 2.8928-4.3008 5.1712-2.9696l82.1248 47.4112a3.4304 3.4304 0 0 1 1.7152 2.9952z" fill="#1AC678" p-id="6381"></path><path d="M413.5424 460.416l0.256 94.336c0 2.6624 2.8928 4.3008 5.1712 2.9696l82.1248-47.4112a3.3792 3.3792 0 0 0 1.7152-2.9952l-0.256-94.336a3.4304 3.4304 0 0 0-5.1712-2.9696l-82.1248 47.4112a3.4304 3.4304 0 0 0-1.7152 2.9952z" fill="#008CFF" p-id="6382"></path><path d="M514.2016 625.6384l81.5616-47.4112a3.456 3.456 0 0 0 0-5.9648l-82.1248-47.4112a3.4816 3.4816 0 0 0-3.456 0l-81.5616 47.4112a3.456 3.456 0 0 0 0 5.9648l82.1248 47.4112a3.4816 3.4816 0 0 0 3.456 0z" fill="#008CFF" p-id="6383"></path></svg>
		            </div>
		            <div class="text">
		                <p>大数据</p>
		                <div>大数据分析与可视化、生命周期</div>
		                <div>大数据计算模式与系统、存储与管理</div>
		                <div>大数据采集与预处理、技术生态</div>
		            </div>
		        </div>
		    </div>
		</div>
		
		
		<div class="row" style="margin-top: 60px;">
			<h2>环环相扣 处处清晰</h2>
			<div class="box">
				<el-row>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<div class="icon">
								<i class="el-icon-circle-plus-outline"></i>
							</div>
							<p class="title">创建笔试</p>
							<p class="desc">
								多种题型选择，支持自定义<br />
								题目与系统题库选择。根据<br />
								难度、知识点等快速组卷，<br />
								灵活高效
							</p>
						</div>
						<div class="diso">
							<span></span><span></span><span></span><span></span>
						</div>
					</el-col>
					<el-col :span="6"
						><div class="grid-content bg-purple">
							<div class="icon">
								<i class="el-icon-message"></i>
							</div>
							<p class="title">邀请考生</p>
							<p class="desc">
								多渠道通知，保障考试到场<br />
								率
							</p>
						</div>
						<div class="diso">
							<span></span><span></span><span></span><span></span>
						</div>
					</el-col>
		
					<el-col :span="6"
						><div class="grid-content bg-purple">
							<div class="icon">
								<i class="el-icon-news"></i>
							</div>
							<p class="title">考试管理</p>
							<p class="desc">
								清晰直观的查看实时考试进<br />
								度，多种防作弊手段，在线<br />
								客服全程答疑
							</p>
						</div>
						<div class="diso">
							<span></span><span></span><span></span><span></span>
						</div>
					</el-col>
		
					<el-col :span="6"
						><div class="grid-content bg-purple">
							<div class="icon">
								<i class="el-icon-remove-outline"></i>
							</div>
							<p class="title">成绩管理</p>
							<p class="desc">
								面试报告数据可视化;支持<br />
								一键导出笔试成绩;支持<br />
								API对接多种系统
							</p>
						</div></el-col
					>
				</el-row>
			</div>
		</div>
		<div style="height:100px"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				imageList: [{
					image: 'http://pic.616pic.com/bg_w1180/00/04/07/TgGpKUMajq.jpg!/fh/300'
				}, {
					image: 'http://pic.616pic.com/bg_w1180/00/06/15/8OumBtlJTf.jpg!/fh/300'
				}, {
					image: 'https://www.mindskip.net:9008/config/sdd/6a1217f7-5770-4772-84f8-dd2a88babb8c/banner.png'
				}]
			}
		}
	}
</script>

<style scoped  lang="scss">
	:root {
	  --bg-color: #f5f8ff;;
	  --main-color: #353536;
	  --secondary-color: #8e92a4;
	  --main-text-color: #5d606b;
	  --secondary-dark-color: #9496a5;
	  --tag-color-one: #e0fbf6;
	  --tag-color-text-one: #58c2a9;
	  --tag-color-two: #ece7fe;
	  --tag-color-text-two: #8972f3;
	  --tag-color-three: #fde7ea;
	  --tag-color-text-three: #e77f89;
	  --tag-color-four: #f7f8fc;
	  --tag-color-text-four: #a0a6b5;
	  --checkbox-color: #009e90;
	  --button-color: #49beb7;
	  --box-color: #fff1d6;
	  --box-color-2: #d3e6ff;
	  --box-color-3: #ffd9d9;
	  --box-color-4: #daffe5;
	  --task-color: #777982;
	}
	.el-main {
		padding: 0rem;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.el-carousel__container {
		height: 25rem
	}
    .head_main{
		text-align:center;
	}
	.main {
		width: 90%;
		/* background-color:#ffffff; */
		margin-left: 5%;
		height: 300px;;
		margin-top:40px;
		 overflow: hidden;
	}

	.main1{
		background-color: #f9f9f9;
		margin-left: 5%;
		/* overflow:hidden */
		
	}
	.main_Item{
		border-radius: 25px;
		/* background: #f9a67c; */
		width:30%;
		height:200px;
		float:left;
		text-align: center;
		/* background-color:#ffffff; */
		margin-left:30px;
	}
	.main_Item1{
		border-radius: 25px;
		background: #fcfcfc; 
		width:20%;
		height:100px;
		line-height: 100px;
		float:left;
		background-color:#ffffff;
		margin-left:4%;
		margin-top: 20px;
		text-align: center;
	}
	h1{
	    margin: 0 auto;
	}
	p{
	    font-size: 22px;
	}
	.step{
	    min-width: 100vh;
	    min-height: 50vh;
	    background: #f3f5f5;
	    &>h1{
	       text-align: center;
	       padding: 30px 0;
	    }
	    &>.demo{
	        display: flex;
	        padding: 30px 0;
	        &>.demo1{
	            width: 30%;
	            margin-left: 30px;
	            display: flex;
	            justify-content: center;
	            align-items: center;
	            border: 1px solid #fff;
	            border-radius: 20px;
	            background: #fff;
	           &>.icon{
	               position: relative;
	               top: -10px;
	               left: -20px;
	           }
	        }
	    }
	}
	.text{
	    &>div{
	    margin: 10px 0;
	    color: #666;
	    }
	}
	.icon{
	    width: 50px;
	}
	.row {
		background: #e5e9f2;
		height: 500px;
		h2 {
			text-align: center;
			padding-top: 20px;
		}
		.box {
			display: flex;
			justify-content: space-around;
			.el-row {
				margin-left: 80px;
				:last-child {
					margin-bottom: 0;
				}
			}
			.bg-purple-dark {
				background: #99a9bf;
			}
			.bg-purple {
				background: white;
			}
			.bg-purple-light {
				background: #e5e9f2;
			}
			.grid-content {
				display: flex;
				flex-direction: column;
				border-radius: 20px;
				min-height: 250px;
				width: 240px;
				margin: 10px 0px;
				padding: 20px 0px 5px 0;
				text-align: center;
				.icon {
					.el-icon-circle-plus-outline {
						color: rgb(236, 59, 59);
						font-size: 60px;
					}
					.el-icon-message {
						color: rgba(245, 132, 3, 0.486);
						font-size: 60px;
					}
					.el-icon-news {
						color: rgba(14, 72, 233, 0.486);
						font-size: 60px;
					}
					.el-icon-remove-outline {
						color: rgba(8, 187, 127, 0.486);
						font-size: 60px;
					}
				}
				.title {
					font-size: 18px;
				}
				.desc {
					font-size: 13px;
					color: rgb(146, 135, 135);
					margin-top: 2px;
				}
			}
			.row-bg {
				background-color: #f9fafc;
			}
			.el-col {
				display: flex;
				border-radius: 4px;
			}
			.diso {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 90px;
				margin-left: -6px;
				span {
					width: 5px;
					height: 5px;
					background: #39d39c;
					border-radius: 50%;
					margin-left: 6px;
				}
			}
		}
		.btn {
			text-align: center;
			margin-top: 30px;
			.el-button {
				background-color: #39d39c;
				border: none;
			}
		}
	}
	
</style>
